$(function() {
	var width = parseInt($('#pannel').css('width'));
	var height = parseInt($('#pannel').css('height'));
	$("#pageVisitCount").css("width", width - 50);
	$("#pageVisitCount").css("height", height - 10);
	loadEchartData();
});

function loadEchartData() {
	var xdata = new Array();
	var ydata = new Array();
	var winP= window.parent.document.referrer;
	var faultId = '';
	if(winP.indexOf('index.xhtml')!=-1){
		faultId = document.getElementById('form1:faultId').value;
	}else{
		 faultId = document.getElementById('faultId').value;
	}
	$.getJSON('/rest/predict/getFaultReasonPredict/'+faultId, function(result) {
		for (x in result) {
			xdata[x] = result[x].name;
			ydata[x] = result[x].value;
		}
		initEchartBar(' ',' ','pageVisitCount',xdata,ydata,'概率（%）',' ','准确率（%）');
	});
}

var Xindex;// 接收x轴点击处的值
function initEchartBar(name,subname,id,xdata,ydata,mess,xname,yname) {
	var echart = echarts.init(document.getElementById(id));
	if('pageVisitCount' == id){
		echart.on('click', function(params) {
			/*loadPageVisitor(xdata[Xindex]);*/
		/*	creatDetailPage();*/
		});
	}
	var option = {
		title : {
			text : name,
			subtext:subname,
			x : 'center',
			y : 'top',
			textAlign : 'left',
		},
		color : [ '#008080' ],
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				type : 'shadow'
			},
			formatter : function(params) {
				var html = '';
				if (params.length > 0) {
					Xindex = params[0].dataIndex;
					for (var int = 0; int < params.length; int++) {
						html += params[int].seriesName + ':' + params[int].data + '<br>';
					}
				}
				return html;
			}
		},
		grid : {
			left : '3%',
			right : '4%',
			bottom : '3%',
			containLabel : true
		},
		dataZoom : [ {
			/*type : 'inside',*/
			start : 0,
			end : 70
		} ],
		toolbox : {
			show : false,
			x:'92%',
			feature : {
				dataView : {
                	readOnly: true,
                	optionToContent:function(opt){
                		var axisData = opt.xAxis[0].data;
                	    var series = opt.series;
                	    var table = '<table border="1" style="width:100%;text-align:center"><tbody><tr>'
                	                 + '<td>'+opt.xAxis[0].name+'</td>';
                	    for(var j=0;j<series.length;j++){
                	    	table = table + '<td>' + series[j].name + '</td>'
                	    }
                	    for (var i = 0, l = axisData.length; i < l; i++) {
                	        table += '<tr>'
                	                 + '<td>' + axisData[i] + '</td>';
                	        for(var z=0;z<series.length;z++){
                	        	if(isNaN(parseInt(series[z].data[i]))){
                	        		table = table + '<td>' + '</td>';
                	        	}else{
                	        		table = table + '<td>' + series[z].data[i] + '</td>';
                	        	}
                	        }
                	    }
                	    table += '</tbody></table>';
                	    return table;
                	},
                	iconStyle:{
                		normal:{},
                		emphasis:{}
                	}
                },
				magicType : {
					show : false,
					type : [ 'line' ]
				},
				restore : {
					show : false
				},
				saveAsImage : {
					show : false
				},
			}
		},
		xAxis : {
			type : 'category',
			data : xdata,
			name : xname,
			axisTick : {
				alignWithLabel : true
			},
			axisLabel : {
				interval : 0,
				rotate : 0,
				textStyle : {
					color : '#737373'
				},
				formatter : function(value) {
					return value.split("").join("\n");
				}
			}
		},
		yAxis : {
			name : yname,
			axisTick : {
				alignWithLabel : true
			}
		},
		series : [ {
			name : mess,
			type : 'bar',
			barWidth : '40%',
			data : ydata
		},

		],
		label : {
			normal : {
				show : true,
				position : 'top',
				formatter : '{c}'
			}
		},
		itemStyle : {
			normal : {
				/*color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
					offset : 0,
					color : 'rgba(17, 168,171, 1)'
				}, {
					offset : 1,
					color : 'rgba(17, 168,171, 0.1)'
				} ]),*/
				shadowColor : 'rgba(0, 0, 0, 0.1)',
				shadowBlur : 10,
				color:'#8FBC8F'
			}
		},
	};
	echart.setOption(option);
}

